import React, {useEffect, useState} from 'react'
import {useMount} from 'utils'

const test = () => {
    let num = 0
    const effect = () => {
        num += 1
        const message = `现在的num值:${num}`
        return function unmount() {
            console.log(message)
        }
    }
    return effect
}
// 执行test,返回effect函数
const add = test()
//执行effect函数,返回引用了message1的unmount函数
const unmount = add()
//再一次执行effect函数,返回引用了messages2的unmount函数
add()
// 引用了messages3
add()
//实际引用了message1,因此打印出来了1
unmount()  //实际打印了1
//react hook 与 闭包 , hook 与 闭包经典的坑
export const Test = () => {
    const [num, setNum] = useState(0)
    const add = () => setNum(num + 1)
    // 在这里 界面加载才会执行一次 其实形成了一个闭包 无论num 怎么变化都不会执行
    // 如何避免呢
    // useMount(() => {
    //     setInterval(() => {
    //         console.log("num in setInterval:", num)
    //     }, 1000)
    // })
    // useEffect(() => {
    //     const id = setInterval(() => {
    //         console.log("num in setInterval:", num)
    //     }, 1000)
    //     return () => clearInterval(id)
    // }, [num])
    useEffect(() => {
        return () => {
            console.log('卸载值', num)
        }
    }, [num])
    return <div>
        <button onClick={add}>add</button>
        <p>
            number:{num}
        </p>
    </div>
}